<template>
  <view class="comment-wrap">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="站点评论"></van-nav-bar>
    <!-- #endif -->
    <view class="order-item">
      <view class="title text-bold">订单信息</view>
      <view class="row">
        <view class="left">充电单号</view>
        <view class="right">{{ detailsData.startChargeSeq || '--' }}</view>
      </view>
      <view class="row">
        <view class="left">站点名称</view>
        <view class="right">{{ detailsData.stationName || '--' }}</view>
      </view>
      <view class="row">
        <view class="left">开始时间</view>
        <view class="right">{{ detailsData.startTime || '--' }}</view>
      </view>
      <view class="row">
        <view class="left">结束时间</view>
        <view class="right">{{ detailsData.endTime || '--' }}</view>
      </view>
    </view>
    <view class="comment">
      <view class="title text-bold">评价留言</view>
      <textarea
        v-model="detailsData.content"
        class="textarea-wrap"
        placeholder="请输入评价留言"
        maxlength="200" />
    </view>
    <view class="bottom-wrap text-bold" :style="styleBntH">
      <button class="bnt-wrap bnt" @tap="tapComment">确认评论</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getSystemInfo, getUserId, setToastInstance, systemInfo } from '@mixins/info';
import { addStationComment } from '@/service/apis/station';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const styleBntH = `height: calc(124rpx - 36rpx + ${getSystemInfo().safeBottom}px)`;

const $toast: any = inject('$Toast');

let detailsData = reactive({
  startChargeSeq: '',
  stationId: '',
  stationName: '',
  startTime: '',
  endTime: '',
  content: '',
});

let isComment = ref(false);

onLoad((option: any) => {
  detailsData.startChargeSeq = option.startChargeSeq;
  detailsData.stationId = option.stationId;
  detailsData.stationName = option.stationName;
  detailsData.startTime = option.startTime;
  detailsData.endTime = option.endTime;
});

const tapComment = () => {
  if (!detailsData.content) {
    $toast('请输入评论留言');
    return;
  }
  let content = detailsData.content;
  if (content.length > 200) {
    content = detailsData.content.substring(0, 200);
  }
  addStationComment({
    stationId: detailsData.stationId,
    stationName: detailsData.stationName,
    userId: getUserId(),
    content: content,
    startChargeSeq: detailsData.startChargeSeq,
  }).then((res: any) => {
    isComment.value = true;
    $toast('评论留言成功！');
    uni.navigateBack();
  });
};

onUnload(() => {
  uni.$emit('returnData', isComment.value ? '' : 'comment');
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.comment-wrap {
  height: 100vh;
  padding-top: 12px;
  background-color: #f2f2f2;
  // #ifdef H5
  box-sizing: border-box;
  padding-top: 0px;
  // #endif

  .title {
    line-height: 24px;
    padding-bottom: 2p;
    font-size: 16px;
    color: #000;
  }

  .order-item {
    margin: 0 12px;
    padding: 16px 16px 10px 16px;
    background-color: #fff;
    border-radius: 8px;
    // #ifdef H5
    margin-top: 12px;
    // #endif

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      line-height: 22px;
      font-size: 14px;
      color: #242424;
    }
  }

  .comment {
    margin: 12px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;

    .textarea-wrap {
      height: 144px;
      margin-top: 6px;
      padding: 8px;
      border: 1px solid #d5d5d5;
      border-radius: 4px;
      // #ifdef H5
      width: 100%;
      box-sizing: border-box;
      // #endif
    }
  }

  .bottom-wrap {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 9px 16px;
    background-color: #fff;
    font-size: 14px;
    color: #242424;
    border-top: 1px solid #e6e6e6;

    .bnt {
      width: 100%;
      height: 44px;
      margin: 0;
      border-radius: 50px;
      font-size: 16px;
    }
  }
}
</style>